<template>
  <view class="partsRecord">
    <view class="record_wrap">
      <view class="wrap_name">{{ parObj.buildingName }}
        <text class="wrap_tit">{{ parObj.elevatorAddress }} <text>维修</text></text>
      </view>
    </view>
    <!-- 配件列表start -->
    <view class="" style="margin-top: 20rpx">
      <partsList :listData="listData" @toPage="toRepairDetail" :isMy="true" />
    </view>
    <view v-show="isLoadMore"><uni-load-more :status="loadStatus"></uni-load-more></view>
    <view style="height: 100rpx"></view>
    <previewMedia ref="previewMedia"></previewMedia>
  </view>
</template>

<script>
import partsList from '@/components/partsList/partsList.vue';
import { partsNewMyList } from '@/apis/parts.js';
export default {
	name: 'partsRecord',
	components: {
		partsList,
	},
	data() {
		return {
			btnStatus: false,
			listData: [], // 列表
			pages: {
				current: 1,
				size: 10,
			},
			loadStatus: 'loading',
			isLoadMore: false,
			parObj: {}, // 上一页数据
			workOrderType: '', // 上一页任务类型
			emerProcType: '', // 上一页紧急程度
		};
	},
	onLoad(opt) {
		console.log('partsRecord', opt);
		if (opt.workOrderType) {
			this.workOrderType = opt.workOrderType;
			this.emerProcType = opt.emerProcType;
		}
		if (opt.obj) {
			this.parObj = JSON.parse(opt.obj);
		}
		uni.startPullDownRefresh();
	},
	onShow(opt) {
		// console.log("onShowonShow",opt)
		// this.pages.current = 1
		// this.listData = []
		// this.initList()
	},
	methods: {
		initList() {
			uni.showLoading({
				title: '加载中',
			});
			return new Promise((resolve, reject) => {
				partsNewMyList({
					fromPlanId: this.parObj.planId,
					current: this.pages.current,
					size: this.pages.size,
					wxPlanId: this.parObj.planId
				})
					.then((res) => {
						if (res.code === 200) {
							uni.hideLoading();
							const arr = res.data.records || [];
							let auditStatusObj = {
								1: '审批中',
								2: '审批通过',
								3: '审批不通过',
								4: '已撤回',
								5: '已退回',
							};
							for (let i = 0;i < arr.length;i++) {
								arr[i].auditStatusName = auditStatusObj[arr[i].approveStatus];
								if (arr[i].skuPartsInfo) {
									let skuPartsInfo = arr[i].skuPartsInfo;
									if (arr[i].skuPartsInfo && !Array.isArray(arr[i].skuPartsInfo) && arr[i].skuPartsInfo.skuItemList) {
										skuPartsInfo = arr[i].skuPartsInfo.skuItemList;
									}
									let skuPartsInfoArr = [];
									if (Array.isArray(skuPartsInfo)) {
										skuPartsInfo.forEach(v=>{
											if (v.unitName) {
												skuPartsInfoArr.push(v.value + v.unitName);
											} else {
												skuPartsInfoArr.push(v.value);
											}
										});
										arr[i].partsModel = skuPartsInfoArr.join(';');
									}
								}
							}
							this.listData = this.listData.concat(arr);
							if (arr.length < this.pages.size) {
								this.isLoadMore = true;
								this.loadStatus = 'noMore';
							} else {
								this.isLoadMore = false;
							}
						}
					})
					.catch((err) => {
						reject(err);
					});
			});
		},
		onReachBottom() {
			console.log('下拉加载', this.pages.current);
			if (!this.isLoadMore) {
				this.isLoadMore = true;
				this.pages.current += 1;
				this.initList();
			}
		},
		onPullDownRefresh() {
			this.pages.current = 1;
			this.listData = [];
			this.initList();
			setTimeout(function () {
				uni.stopPullDownRefresh(); // 停止下拉刷新动画
			}, 1000);
		},
		toParts() {
			uni.navigateTo({
				url: './applyParts?obj=' + JSON.stringify(this.parObj) + '&fromType=record' + '&workOrderType=' + this.workOrderType + '&emerProcType=' + this.emerProcType,
			});
		},
		toRepairDetail(obj) {
			uni.navigateTo({
				url: '/subpages/approve/partApprovalDetail?type=3&&id=' + obj.planId,
			});
		},
	},
};
</script>

<style lang="scss">
page {
  background: #f5f8f9;
}

%widthPage {
  width: 680rpx;
  margin: 0 auto;
  background-color: #ffffff;
}

@mixin fontColors($px, $count, $colour) {
  font-size: $px;
  font-weight: $count;
  color: $colour;
}

.partsRecord {
  .record_wrap {
    height: 166rpx;
    background: #2c2c2c;

    .wrap_name {
      padding: 40rpx 20rpx 0 20rpx;
      @include fontColors(36rpx, 500, #ffffff);
    }

    .wrap_tit {
      margin-left: 20rpx;
      @include fontColors(26rpx, 400, #ffffff);

      text {
        @include fontColors(20rpx, 400, #ffffff);
        background: #0091ff;
        border-radius: 4rpx;
        display: inline-block;
        padding: 2rpx 10rpx;
        margin-left: 10rpx;
      }
    }
  }
}

.BA_item_botm {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  height: 98rpx;
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;

  .botm {
    width: 720rpx;
    margin: 0 auto;
    height: 70rpx;
    background: #0091ff;
    border-radius: 8rpx;
    line-height: 70rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
  }

  .botms {
    background: #efefef;
  }
}
</style>
